<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03猜数字游戏</title>
</head>
<body>

<h1>已生成一个1 - 100之间的随机数</h1>
<input type="text" id="guessInput"> <!-- 给输入框添加ID以便查询 -->
<button onclick="guess()">点我验证</button>
<h1>小提示: <span id="message" style="color: red;"></span></h1> <!-- 给提示信息的span添加ID -->

<script>
    let r = parseInt(Math.random() * 100) + 1; // 生成1到100之间的随机数
    let count = 0;
    function guess() {

        let input = document.getElementById('guessInput'); // 使用ID获取输入框元素
        let spanE = document.getElementById('message'); // 使用ID获取提示信息的span元素

        if (isNaN(input.value)){
            alert("请输入数字");
            return;
        }
        //点击一次
        count++;
        input.value = parseInt(input.value)
        if (input.value > r) { // 使用input.value获取用户输入的值
            console.log("猜大了");
            console.log(input.value, r);
            spanE.innerHTML = "猜大了";

        } else if (input.value < r) {
            console.log("猜小了");
            console.log(input.value, r);
            spanE.innerHTML = "猜小了";
        } else if (input.value == r) {
            console.log("猜对了");
            console.log(input.value, r);
            spanE.innerHTML = "恭喜你用了" + count + "次";
            // 清空输入框以便开始新游戏
            input.value = "";
            //清空
            count = 0

        }
    }
</script>
</body>
</html>
